<template>
	<div class='order'>
		<header>
			<i @click="goBack">
				<
			</i>
			<span>提交订单</span>
			<i class="iconfont icon-liaotian"></i>
		</header>
		<section>
			<div class='path'>
				<h3 class='path-title'>收货信息</h3>
				<div class='path-content'>
					<div>
						<span>名称</span>
						<span>1008611</span>
					</div>
					<div>
						<span>省</span>
						<span>市</span>
						<span>区</span>
						<span>详细地址</span>
					</div>
				</div>
			</div>
			<div class='payment'>
				<div class='payment-title'>支付方式：</div>
				<van-radio-group v-model="radioPayment">
					<van-radio name="wx">微信支付</van-radio>
					<van-radio name="ali">支付宝支付</van-radio>
				</van-radio-group>
			</div>
			<div class='goods'>
				<ul>
					<li>
						<div>
							<img src="../../public/images/s-6.webp" alt="">
						</div>
						<div class='goods-content'>
							<h4>luck</h4>
							<div class='goods-total'>
								<span>¥199</span>
								<span>x10</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</section>
		<footer>
			<div class='order-total'>
				<span>共</span>
				<b></b>
				<span>件,</span>
				<span>总金额：</span>
				<em>1999</em>
			</div>
			<div class='order-topay' @click="golyg">提交订单</div>
		</footer>
	</div>
</template>

<script setup>
import { ref } from 'vue';
	import { useRouter } from 'vue-router'
	let router = useRouter()
	const radioPayment = ref('wx')
	const goBack=()=>{
		router.back()
	}
	const path = ref({
		id:1,
		name:'张三',
		tel:'15516812978',
		province:'北京市',
		city:'北京市',
		county:'朝阳区',
		addressDetail:'某某小区7号楼3单元101'
	})
	const golyg = ()=>{
		router.push({path:'/lyg'})
	}
</script>

<style scoped>
	
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 3rem;
		color: #f4111c;
		background-color: #fafafa;
		border-bottom: 2px solid #eee;
	}

	header i {
		padding: 0 0.4rem;
		font-size: 1rem;
	}

	header span {
		font-weight: 300;
		font-size: 0.7rem;
	}

	
	section {
		background-color: #fafafa;
	}

	section .path-title {
		padding: 0.8rem;
		font-size: 0.8rem;
	}

	section .path-content {
		padding: 0.7rem 0.4rem;
		font-size: 0.7rem;
		background-color: #FFFFFF;
	}

	section .path-content span {
		padding-right: 0.16rem;
	}

	section .payment {
		padding: 0.7rem 0.4rem;
		margin-top: 0.7rem;
		font-size: 0.7rem;
		background-color: #FFFFFF;
	}

	section .payment .van-radio-group {
		display: flex;
		padding: 0.3rem 0;
	}

	section .payment .van-radio-group .van-radio {
		padding-right: 0.266666rem;
	}

	section .goods {
		padding: 0.3rem 0.4rem;
		margin-top: 0.4rem;
		font-size: 0.426666rem;
		background-color: #FFFFFF;
	}

	section .goods ul {
		width: 100%;
	}

	section .goods ul li {
		display: flex;
		width: 100%;
	}

	section .goods ul li img {
		width: 7rem;
		height: 10rem;
	}

	section .goods ul li .goods-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 1rem;
		font-size: 0.7rem;
	}

	section .goods ul li .goods-content .goods-total {
		display: flex;
		justify-content: space-between;
		font-size: 0.7rem;
	}

	
	footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 3rem;
		border-top: 1px solid #0998eb;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	footer .order-total {
		font-size: 0.7rem;
	}

	footer .order-total span {
		padding: 0 0.16rem;
	}

	footer .order-total b {
		color: #666;
	}

	footer .order-total em {
		font-size: 0.7rem;
		color: #ff5777;
	}

	footer .order-topay {
		width: 3.2rem;
		line-height: 1.2rem;
		color: #fff;
		font-size: 0.426666rem;
		text-align: center;
		background-color: #ff5777;
	}
</style>